<%--
  Created by IntelliJ IDEA.
  User: 韦树达
  Date: 2024/12/19
  Time: 21:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班次日历</title>
    <link rel="stylesheet" href="../css/admin_nav.css" />
    <link rel="stylesheet" href="../css/yishi_bc.css" />
</head>
<body>
<jsp:include page="admin.jsp" />
<div class="content">
    <jsp:include page="admin_nav.jsp" />
        <div class="main">
            <div class="calendar-container">
                <div class="week-header">
                    <div class="week-selector" onclick="toggleDropdown()">
                        <span class="week-title">第1周</span>
                        <span class="dropdown-arrow"></span>
                    </div>
                    <div class="week-dropdown">
                        <div class="week-option" onclick="selectWeek(1)">第1周</div>
                        <div class="week-option" onclick="selectWeek(2)">第2周</div>
                        <div class="week-option" onclick="selectWeek(3)">第3周</div>
                        <div class="week-option" onclick="selectWeek(4)">第4周</div>
                    </div>
                </div>
                <div class="calendar-grid">
                    <div class="grid-header"></div>
                    <div class="grid-header" data-day="1">
                        <div class="day-header">周一</div>
                        <div class="date">12-16</div>
                    </div>
                    <div class="grid-header" data-day="2">
                        <div class="day-header">周二</div>
                        <div class="date">12-17</div>
                    </div>
                    <div class="grid-header" data-day="3">
                        <div class="day-header">周三</div>
                        <div class="date">12-18</div>
                    </div>
                    <div class="grid-header" data-day="4">
                        <div class="day-header">周四</div>
                        <div class="date">12-19</div>
                    </div>
                    <div class="grid-header" data-day="5">
                        <div class="day-header">周五</div>
                        <div class="date">12-20</div>
                    </div>
                    <div class="grid-header" data-day="6">
                        <div class="day-header">周六</div>
                        <div class="date">12-21</div>
                    </div>
                    <div class="grid-header" data-day="0">
                        <div class="day-header">周日</div>
                        <div class="date">12-22</div>
                    </div>

                    <div class="time-slot">
                        <div class="shift-name">早班</div>
                        <div class="time-range">8:00-13:00</div>
                    </div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>

                    <div class="time-slot">
                        <div class="shift-name">中班</div>
                        <div class="time-range">13:00-18:00</div>
                    </div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>

                    <div class="time-slot">
                        <div class="shift-name">晚班</div>
                        <div class="time-range">18:00-23:00</div>
                    </div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                    <div class="grid-cell" onclick="openModal(this)"></div>
                </div>
            </div>

            <div class="modal" id="shiftModal">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">添加班次</h3>
                        <span class="close" onclick="closeModal()">&times;</span>
                    </div>
                    <form id="shiftForm" onsubmit="submitForm(event)">
                        <div class="form-group">
                            <label for="service">服务：</label>
                            <select id="service" required>
                                <option value="">请选择服务</option>
                                <option value="面部保养">面部保养</option>
                                <option value="花朵美体">花朵美体</option>
                                <option value="法式微整形">法式微整形</option>
                                <option value="法式面部美容">法式面部美容</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">姓名：</label>
                            <select id="name" required>
                                <option value="">请选择姓名</option>
                                <option value="张美丽">张美丽</option>
                                <option value="刘丽丽">刘丽丽</option>
                                <option value="刘文静">刘文静</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="employeeId">工号：</label>
                            <select id="employeeId" required>
                                <option value="">请选择工号</option>
                                <option value="001">001</option>
                                <option value="002">002</option>
                                <option value="003">003</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="notes">备注：</label>
                            <input type="text" id="notes">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-cancel" onclick="closeModal()">取消</button>
                            <button type="submit" class="btn btn-submit">完成</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>
<script src="../js/yishi_bc.js"></script>
</body>
</html>
